<template>
	<view class="page">
		<fu-custom bgColor="bg-white" :isBack="true">
			<block slot="content">{{i18n['砍单记录']}}</block>
		</fu-custom>
		<fu-tab :tabs="tabs" :sticky="true" :lineColor='colorTheme' :activeColor='colorTheme' :scrollspy="true"
			line-height="8" radius="80" bottom="0" :top="CustomBar" node-title="title" @change="tabSelect"
			node-key="state" :current="TabCur" current-key="type"></fu-tab>
		<!-- <view class="tab-bar bg-white nav flex text-center" :style="[{ top: CustomBar + 'px' }]">
      <block v-for="(item, index) in tabs" :key="index">
        <view class="cu-item flex-sub" :class="index == TabCur ? 'cur' : ''" @tap="tabSelect" :data-id="index">{{ item.title }}</view>
      </block>
    </view> -->
		<view class="padding-lr margin-top-sm">
			<block v-for="(item, index) in listData" :key="index">
				<view class="radius-24 bg-white margin-bottom-sm " @click="toBargainDetail(item)">
					<view class="flex padding solid-bottom">
						<view class="fu-block-200 relative margin-right-sm radius-16 overHidden">
							<fu-image :src="item.goods_thumb" mode="aspectFill"></fu-image>
							<image :src="imgBaseUrl+'activity/icon.png'" mode="" class="icon-box width-112 height-38">
							</image>
						</view>
						<view class="flex-sub flex justify-between flex-direction">
							<view class="text-cut-2 text-df">{{ item.goods_name }}</view>
							<view class=" text-xs">{{ item.sku_name }}</view>
							<view class=" text-xs flex align-center text-vecode" v-if="item.is_bargain==1">
								<image :src="imgBaseUrl+'activity/time.png'" mode="" class="fu-block-26 margin-right-4">
								</image>
								<text class="text-vecode">{{i18n['倒计时']}}</text>
								<min-countdown color="'#0B85FF" :targetTime='item.cut_end_time*1000'>
								</min-countdown>
							</view>
							<view class=" text-sm text-prices text-bold flex align-center">
								<text class="text-sm">{{i18n['已砍掉']}} ：</text>
								<text class="text-price text-lg "> {{ item.price }}</text>
							</view>
						</view>
					</view>
					<!-- is_bargain 3 抢购结束 2成功 1进行中 -->
					<view class="flex justify-between text-sm align-center  padding-tb">
						<view class="text-sm   height-48 line-height-48 padding-lr-18 "
							:class="item.is_bargain!=3?'left-item-active':'left-item'">
							{{ item.is_bargain | filterStatus }}
						</view>
						<view class="flex align-center justify-end padding-right-sm">
							<view class=" bg-f8 text-666 height-56 line-height-56 padding-lr radius-100"
								@tap.stop='cancelOrder(item)' v-if="item.is_bargain==1">
								{{i18n['取消活动']}}
							</view>
							<view v-if="item.is_bargain==1"
								class=" bg-theme  text-white height-56 line-height-56 padding-lr radius-100 margin-left">
								{{i18n['继续抢购']}}
							</view>
						</view>
					</view>
					<!-- <view class="is-assemble-info"
            v-if='item.activity_info.status == 1 && item.is_full == 0 && item.pay_status != 0'>
            <button class="action cu-btn round bgclor" @click.stop="goShareDetail(item)">去分享</button>
          </view> -->
				</view>
			</block>
		</view>
		<fu-empty :pagingListLoadedAll="pagingListLoadedAll" :pagingListNoListData="pagingListNoListData"
			:listDataLength="listDataLength" :isLoadInit="isLoadInit"></fu-empty>


		<fu-notwork></fu-notwork>
	</view>
</template>

<script>
	import minCountdown from '../../components/uni-countdown/min-countdown.vue'
	import pagingList from "@/common/mixin/paging_list.js"; //混合开发 请求数据
	export default {
		components: {
			minCountdown
		},
		mixins: [pagingList],
		data() {
			return {
				CustomBar: this.CustomBar,
				TabCur: 0,
				tabs: [{
						title: global.i18n['全部'],
						type: 'all'
					},
					// {
					//   title: global.i18n['进行中'],
					//   type: 'bargaining'
					// },
					{
						title: global.i18n['成功'],
						type: 'bargain_buccess'
					},
					{
						title: '失败',
						type: 'bargaining_failed'
					},
				],
				lists: [],
				minixPagingListsApi: global.apiUrls.postMyBargainList, //混入获取列表接口名
				allowOnloadGetList: true, //是否允许onlaod加载数据
				pageingListApiMethod: 'post', //接口类型属于get
				colorTheme: this.$store.state.themeColor,
				downInfo: null,
				page: 1,
				size: 15,
				isInit: false,
			};
		},
		onLoad() {},
		filters: {
			filterStatus(val) {
				switch (val) {
					case 1:
						return global.i18n['活动进行中']
						break;
					case 2:
						return global.i18n['抢购成功']
						break;
					case 3:
						return global.i18n['活动结束']
						break;
					default:
						break;
				}
			}
		},
		methods: {
			/* @description 混入传参钩子函数
			 * @param type 获取数据类型 type 1为收藏列表 3为浏览历史
			 */
			pagingListPostData() {
				return {
					type: this.tabs[this.TabCur].type,
					// page: this.page,
					list_rows: this.size
				};
			},
			// 取消订单
			cancelOrder(item) {
				this.$util.showModal({
					title: this.i18n['确认取消抢购吗'],
					success: res => {
						if (res.confirm) {
							this.$api.post(global.apiUrls.postCancelOrder, {
								order_sn: item.order_sn,
								return_id: ''
							}).then(res => {
								this.$message.info(res.data.msg);
								if (res.data.code == 1) {
									this.pagingListToggle()
								} else {
							
								}
							}).catch(err => {
								this.$message.info('服务器错误，请稍后重试');
							});
						}
					}
				});
			
			},
			// 跳转抢购详情
			toBargainDetail(item) {
				this.$urouter.navigateTo({
					url: '/pages/activity/bargain/bargain-log/index',
					params: {
						order_sn: item.order_sn
					}
				})
			},
			// 去分享
			goShareDetail(item) {
				console.log(item);
				this.$urouter.navigateTo({
					url: '/pages/activity/assemble/assemble-share',
					params: {
						order_sn: item.order_sn
					}
				});
			},
			tabSelect(e) {
				this.TabCur = e.index;
				this.page = 1;
				this.pagingListToggle()
			},
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
	}

	.tab-bar {
		position: sticky;
		z-index: 99;
	}

	.left-item-active {
		background: rgba(#FE5014, 0.1);
		color: #FE5014;
		border-radius: 0 32rpx 32rpx 0;
	}

	.left-item {
		background: #F6F7F9;
		color: #666;
		border-radius: 0 32rpx 32rpx 0;
	}

	.icon-box {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 10;
	}
</style>
